<template>
  <el-date-picker
      class="custom-date-picker"
      v-model="dateRange"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      @change="handleDateChange"
      style="width: 90%;height: 28px;font-size: 12px; background-color: #000C34; color: #ffffff; "
  >
  </el-date-picker>
</template>

<script>
export default {
  name: 'DateRangePicker',
  props: {
    startDate: Date,
    endDate: Date,
  },
  data() {
    return {
      dateRange: this.startDate && this.endDate ? [this.startDate, this.endDate] : null,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
    };
  },
  watch: {
    startDate(val) {
      this.updateDateRange(val, this.endDate);
    },
    endDate(val) {
      this.updateDateRange(this.startDate, val);
    },
  },
  methods: {
    handleDateChange(value) {
      this.$emit('update:startDate', value ? value[0] : '');
      this.$emit('update:endDate', value ? value[1] : '');
    },
    updateDateRange(start, end) {
      if (start && end) {
        this.dateRange = [start, end];
      } else {
        this.dateRange = null;
      }
    },
  },
};
</script>

<style scoped>
/* 自定义样式根据需求调整 */
.custom-date-picker .el-input__inner {
  background-color: transparent !important;
  border: 1px solid #ffffff; /* 白色边框 */
  color: #ffffff; /* 白色字体 */
}

.custom-date-picker .el-range-separator {
  color: #ffffff; /* 白色 "至" 分隔符 */
}

</style>
